import React, { PropTypes } from 'react';
import { Button, Icon,Menu } from 'antd';
import QueueAnim from 'rc-queue-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import BannerAnim, { Element } from 'rc-banner-anim';
import 'rc-banner-anim/assets/index.css';
import OverPack from 'rc-scroll-anim/lib/ScrollOverPack';
import {getcookie} from '../../utils/cookies'
import {setcookie} from '../../utils/cookies'
const BgElement = Element.BgElement;
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

class Banner extends React.Component {
  handleClick = (e) => {
  // console.log('click', e);
}

  render() {
    // console.log("-----banner1---this.props",this.props)
    const props = { ...this.props };
    delete props.isMode;

    const childrenData = this.props.fatherProps.indexInfo.swiperList



    // const childrenData = [
    //   {
    //     title: '2018 年考研数学强化班 ',
    //     content: '主讲老师',
    //     keyTeacher: '张飞',
    //     button: '了解更多',
    //   },
    //   // {
    //   //   title: 'JAVA 一体班 实战班 ',
    //   //   content: '主讲老师',
    //   //   keyTeacher: '蔡凯伟',
    //   //   button: '了解更多',
    //   // }
    // ];
    // console.log("------childrenData",childrenData)
    // console.log("------this.props.fatherProps.swiperList",this.props.fatherProps.indexInfo.swiperList)
    const childrenToRender = childrenData.map((item, i) => {
      const title = item.courseName;
      const content = item.content
      const courseId = item.courseId
      const keyTeacher = item.keyTeacher
      const button = '了解更多';
      return (<Element
        key={i}
        prefixCls="banner-user-elem"
      >
        <BgElement
          className={`bg bg${i}`}
          key="bg"
        />
<div className={`${props.className}-navAndTitle`}>
        <QueueAnim
          type={['bottom', 'top']} delay={200}
          className={`${props.className}-navAndTitle-title`}
          key="text"
          id={`${props.id}-wrapperBlock${i}`}
        >
          <p
            key="title"
            id={`${props.id}-contentBlock${i}`}
          >
            {title}
          </p>
          {/*<p*/}
            {/*key="keyTeacher"*/}
            {/*id={`${props.id}-contentBlock${i}`}*/}
          {/*>*/}
            {/*{content} : { keyTeacher }*/}
          {/*</p>*/}
          <Button
            type="ghost"
            key="button"
            id={`${props.id}-buttonBlock${i}`}
            onClick={()=>{
              {/*console.log("------courseId------",courseId)*/}
              {/*let courseId = courseId*/}
              {/*console.log("------this.props.fatherProps------",this.props.fatherProps)*/}

              let unionid = getcookie("unionid")
              if (unionid != null && unionid !='' && unionid != undefined) {
                this.props.fatherProps.dispatch({type:"courseDetail/getcourseBri",payload:{courseId,unionid}})
                this.props.fatherProps.dispatch({type:"index/indexToCourse",payload:{courseId,unionid}})
              } else {
                window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");

              }


            }}
          >
            {button}
          </Button>
        </QueueAnim>
</div>
      </Element>);
    });
    return (
      <div>
        <div className={`${props.className}-nav`}>
          <Menu onClick={this.handleClick} id="menu" mode="vertical">
            <SubMenu key="sub1" title={<span>我要考研</span>} className={`${props.className}-nav-subMenu`}>
              <Menu.Item key="1"> </Menu.Item>
              <Menu.Item key="2"> </Menu.Item>
              <Menu.Item key="3"> </Menu.Item>
              <Menu.Item key="4"> </Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" title={<span>我要转IT</span>} className={`${props.className}-nav-subMenu`}>
              <Menu.Item key="5"> </Menu.Item>
              <Menu.Item key="7"> </Menu.Item>
              <Menu.Item key="8"> </Menu.Item>
            </SubMenu>
            <SubMenu key="sub4" title={<span>我要考四六级</span>} className={`${props.className}-nav-subMenu`}>
              <Menu.Item key="9"> </Menu.Item>
              <Menu.Item key="10"> </Menu.Item>
            </SubMenu>
          </Menu>
        </div>
      <OverPack
        {...props}
      >
        <TweenOneGroup
          key="banner"
          enter={{ opacity: 0, type: 'from' }}
          leave={{ opacity: 0 }}
          component=""
        >
          <div className={`${props.className}-wrapper`}>

            <BannerAnim
              key="banner"
              autoPlay
            >
              {childrenToRender}
            </BannerAnim>
          </div>
        </TweenOneGroup>
      </OverPack>
      </div>
    );
  }
}

Banner.defaultProps = {
  className: 'banner1',
};

export default Banner;

